import { FC, useEffect, useRef } from "react";
import Mark from "mark.js";
import { forEach } from "lodash";

const Txt: FC<{
  content: string;
  markList: string[];
}> = ({ content, markList }) => {
  const elRef = useRef<HTMLDivElement>();

  useEffect(() => {
    const instance = new Mark(elRef.current);
    forEach(markList, (k) => {
      instance.mark(k);
    });
    return () => {
      instance.unmark();
    };
  }, [markList]);

  return <div ref={elRef} style={{ height: 400, overflowY: 'scroll', fontSize: 16, whiteSpace: 'break-spaces' }}>{content}</div>;
};

export default Txt;
